import { type CSSProperties, type DeepReadonly, type InjectionKey, type UnwrapNestedRefs, reactive, readonly } from 'vue';
import type { $AllColorStr, $SizeUnitArr4Str, $SizeUnitStr } from '../types/interface';
import { isObject } from '../utils/verify';

/** ID 的类型（也是 Provide/Inject中装的值的类型） */
export type ListID = `__MXP-LIST-${string}__`;

/** mxp-list-item组件中需要mxp-collapse组件传递的数据 */
export type MxpListProps = {
  /** 最小高度 */
  itemMinHeight?: $SizeUnitStr;
  /** Padding 默认 '4px 15px' */
  itemPadding?: $SizeUnitArr4Str;
  /** 是否显示箭头 */
  itemArrow?: boolean;
  /** 箭头大小  */
  itemArrowSize?: $SizeUnitStr;
  /** 箭头颜色 */
  itemArrowColor?: $AllColorStr;
  /** 是否有点击效果 */
  itemHover?: boolean;
  /** 是否禁止点击 */
  itemDisabled?: boolean;
  /** 边框颜色 */
  itemBorderColor?: $AllColorStr | boolean;
  /** 整个 item 的样式 */
  itemStyle?: CSSProperties;
  /** 内容容器的样式 */
  itemContentViewStyle?: CSSProperties;
  /** 底部边框样式 */
  itemLineStyle?: CSSProperties;
};

export type MxpListConfig = {
  /** mxp-list-item组件中需要mxp-list组件传递的数据 */
  listProps?: MxpListProps;
  /** 更新折叠状态(如果是折叠状态就删除 key ，如果是未折叠状态就添加 key)  */
  changeUnfoldByKey?: (key: number | string) => void;
};

/** 存储变量（内部使用） */
const mxpListConfigs = reactive<Record<string, MxpListConfig>>({});

/** Provide/Inject的 key */
export const listInjectKey: InjectionKey<ListID> = Symbol('__mxp-list-config-id__');

/** 自定义的状态管理对象 */
export function mxpListStore() {
  return {
    state: readonly(mxpListConfigs) as DeepReadonly<UnwrapNestedRefs<Record<string, MxpListConfig>>>,
    actions: {
      /** 设置 mxp-list 的 props */
      setListProps(id: string, listProps: MxpListProps) {
        if (isObject(mxpListConfigs[id])) {
          mxpListConfigs[id].listProps = listProps;
        } else {
          mxpListConfigs[id] = { listProps };
        }
      },
      /** 设置 changeUnfoldByKey 方法 */
      setChangeUnfoldByKeyFun(id: string, changeUnfoldByKey: MxpListConfig['changeUnfoldByKey']) {
        if (isObject(mxpListConfigs[id])) {
          mxpListConfigs[id].changeUnfoldByKey = changeUnfoldByKey;
        } else {
          mxpListConfigs[id] = { changeUnfoldByKey };
        }
      },
      /** 通过 ID 删除 */
      delItemByID(id: string) {
        if (mxpListConfigs[id]) {
          delete mxpListConfigs[id];
        }
      },
    },
  };
}

export default mxpListStore;
